<!-- 我要下单 -->
<template>
    <div style="background-color: #EFF1F2;padding: 12px 0;">
        <!-- session01 -->
        <div style="display: flex; background-color: white;padding: 12px;border-radius: 8px;">
        <!-- left -->
        <div style="flex:1;">
            <!-- title -->
            <div style="display: flex;">
                <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
                <div style="font-size: 18px;font-weight: bold;">关联订单列表</div>
            </div>
            <!-- items -->
            <div style="margin-top: 12px;width: 50vw;overflow-x: scroll;display: flex;white-space: nowrap;">
                <!-- add btn -->
                <div style="display: flex;flex-shrink: 0;flex-direction: column;align-items: center;width: 90px;height: 126px;background-color: #ffffff;padding: 10px 0;border-radius: 18px;cursor: pointer;">
                    <div @click="createNewOrderHandle()"
                    style="width: 72px;height: 72px;border: 1px solid #ebebeb;display: flex;justify-content: center;align-items: center;border-radius: 8px;">
                        <i class="el-icon-plus" style="font-size: 22px;"></i>
                    </div>
                    <div style="font-size: 14px;color: #999999;margin-top: 5px;">新建订单</div>
                </div>
                <!-- 已取消 -->
                <div v-for="(item,idx) in orders" :key="idx"  @click="index=idx"
                :style="{
                        display: 'flex',
                        flexShrink: 0,
                        flexDirection: 'column',
                        alignItems: 'center',
                        width: '90px',
                        height: '126px',
                        backgroundColor: index!=idx?'#ffffff':'#2456E0',
                        padding: '10px 0',
                        marginRight: '12px',
                        borderRadius: '18px',
                        }">
                        <el-image style="width: 50px;height: 50px;border-radius: 8px;" :src="orders[0].productImg"></el-image>
                        <div 
                        :style="{
                                fontSize: '16px',
                                color: index!=idx?'#222222':'#ffffff',
                                marginTop: '5px',
                                fontWeight: 'bold',
                                }"
                        >{{ orders[0].productName }}</div>
                    <div :style="{ fontSize: '12px',color: index !=idx?'#999999':'#ffffff',marginTop: '5px'}">{{item.status}}</div>
                </div>
            </div>
        </div>
        <!-- right -->
        <div style="flex: 1;">
            <!-- title -->
            <div style="display: flex;">
                <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
                <div style="font-size: 18px;font-weight: bold;">其他操作</div>
            </div>
            <!-- buttons -->
            <div style="margin-top: 12px;">
                <div style="display: flex;">
                    <!-- 暂存订单 -->
                    <div class="back_color" @click="saveHandle()">
                        <div style="font-size: 16px;color: #ffffff;font-weight: bold;">暂存订单</div>
                    </div>
                    <!-- 发布订单 -->
                    <div class="back_color" style="" @click="publishHandle()">
                        <div style="font-size: 16px;color: white;font-weight: bold;">发布订单</div>
                    </div>
                </div>
                <div style="display: flex;flex-wrap: wrap;">
                    <!-- 价格变动 -->
                    <div style="padding: 5px 20px;background-color: #E7EDFA;border-radius: 20px;margin-top: 12px;margin-right: 12px;cursor: pointer; box-shadow: 0 2px 3px #2456E040;">
                        <div style="font-size: 16px;color: #2456E0;" @click="onOpenChangePrice">价格变更</div>
                    </div>
                    <!-- 预设报价明细 -->
                    <div style="padding: 5px 20px;background-color: #E7EDFA;border-radius: 20px;margin-top: 12px;margin-right: 12px;cursor: pointer;box-shadow: 0 2px 3px #2456E040;">
                        <div style="font-size: 16px;color: #2456E0;" @click="onOpenPriceDetail">预设报价明细</div>
                    </div>
                    <!-- 评价 -->
                    <div style="padding: 5px 20px;background-color: #E7EDFA;border-radius: 20px;margin-top: 12px;margin-right: 12px;cursor: pointer;box-shadow: 0 2px 3px #2456E040;">
                        <div style="font-size: 16px;color: #2456E0;" @click="onOpenComment">评价</div>
                    </div>
                </div>
            </div>
        </div>
        </div>


        <!-- session02 -->
        <div style="display: flex; background-color: white;padding: 12px;border-radius: 8px;margin-top: 12px;">
            <!-- left -->
            <div style="flex: 1;padding: 0 12px;">
                <!-- title -->
                <div style="display: flex;">
                    <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
                    <div style="font-size: 18px;font-weight: bold;">项目信息</div>
                </div>
                <!-- items -->
                <div style="margin-top: 12px;">
                    <el-form label-position="right" label-width="130px" size="mini">
                        <el-form-item label="项目名称：">
                            <el-input v-model="currentOrder.projectName"></el-input>
                        </el-form-item>
                        <el-form-item label="定位地址：">
                            <el-input placeholder="#（非必填）" v-model="currentOrder.projectAddress"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

            <!-- mid -->
            <div style="flex: 1;padding: 0 12px;">
                <!-- title -->
                <div style="display: flex;">
                    <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
                    <div style="font-size: 18px;font-weight: bold;">业主信息</div>
                </div>
                <!-- items -->
                <div style="margin-top: 12px;">
                    <el-form :label-position="right" label-width="130px" size="mini">
                        <el-form-item label="业主姓名：">
                            <el-input placeholder="#（非必填）" v-model="currentOrder.owerName"></el-input>
                        </el-form-item>
                        <div style="display: flex;">
                            <el-form-item label="业主手机：" style="flex: 1;">
                                <el-input placeholder="#（非必填）" v-model="currentOrder.owerPhone"></el-input>
                            </el-form-item>
                            <el-checkbox style="margin-top: 5px;margin-left: 12px;">备选项</el-checkbox>
                        </div>
                        <el-form-item label="项目地域：">
                            <el-cascader size="small" :options="regionData" v-model="addressCode" style="width: 100%;"></el-cascader>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

            <!-- right -->
            <div style="flex: 1;padding: 0 12px;opacity: 0;">
                <div style="display: flex;">
                    <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
                    <div style="font-size: 18px;font-weight: bold;">智能识别信息</div>
                </div>
                <el-input
                  style="margin-top: 12px;"
                  type="textarea"
                  :rows="5"
                  placeholder="请输入内容"
                  v-model="currentOrder.textarea"
                >
                </el-input>
                <div style="padding: 5px 20px;background-color: #2456E0;border-radius: 20px;float: right;margin-top: 12px;">
                    <div style="font-size: 16px;color: #ffffff;">立即识别</div>
                </div>
            </div>
        </div>


         <!-- session03 -->
        <div style="background-color: white;padding: 12px;border-radius: 8px;margin-top: 12px;">
            <!-- title -->
            <div style="display: flex;">
                <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
                <div style="font-size: 18px;font-weight: bold;">接单人信息</div>
            </div>
            <div style="display: flex;">
                <!-- left -->
                <div style="flex: 1;padding: 0 12px;">
                    <!-- items -->
                    <div style="margin-top: 12px;display: flex;">
                        <el-image style="width: 90px;height: 90px;border-radius: 27px;">
                        </el-image>
                        <div style="flex: 1;padding-left: 12px;">
                            <el-descriptions :column="1" size="medium" :labelStyle="{fontSize: '14px', fontWeight: 'bold'}">
                                <el-descriptions-item label="下单人">{{`${currentOrder.orderUserName}`}}</el-descriptions-item>
                                <el-descriptions-item label="联系电话">{{currentOrder.orderUserPhone}}</el-descriptions-item>
                                <el-descriptions-item label="身份">项目经理</el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </div>
                </div>
                <!-- right -->
                <div style="flex: 1;padding: 0 12px;" v-if="currentOrder.status != undefined">
                    <!-- items -->
                        <div style="margin-top: 12px;display: flex;">
                            <el-image style="width: 90px;height: 90px;border-radius: 27px;">
                            </el-image>
                            <div style="flex: 1;padding-left: 12px;">
                                <el-descriptions :column="1" size="medium" :labelStyle="{fontSize: '14px', fontWeight: 'bold'}">
                                    <el-descriptions-item label="接单人">{{currentOrder.orderTakeName}}</el-descriptions-item>
                                    <el-descriptions-item label="联系电话">{{currentOrder.orderTakePhone}}</el-descriptions-item>
                                    <el-descriptions-item label="身份">{{currentOrder.orderTakeRoleName}}</el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </div>
                </div>
            </div>
        </div>

            <!-- session04 -->
                <div style="background-color: white;padding: 12px;border-radius: 8px;margin-top: 12px;">
            <!-- title -->
            <div style="display: flex;">
                <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
                <div style="font-size: 18px;font-weight: bold;">{{currentOrder.projectName}}</div>
            </div>
            <div style="display: flex;">
                <!-- form -->
                <div style="padding: 0 12px;margin-top: 12px;">
                    <el-form ref="form" label-width="130px">
                        <div style="display: flex;">
                            <el-form-item label="指定时段">
                                <el-select placeholder="请选择" v-model="currentOrder.timeLimitType">
                                  <el-option
                                      v-for="(obj,idx) in timeTypes"
                                      :key="idx"
                                      :label="obj.name"
                                      :value="obj.name">
                                      </el-option>
                                  </el-select>
                            </el-form-item>

                            <el-form-item label="指定时间段">
                                <el-date-picker
                                    type="date"
                                    v-model="currentOrder.timeLimitStart"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="选择日期时间">
                                </el-date-picker>
                                至
                                <el-date-picker
                                    type="date"
                                    v-model="currentOrder.timeLimitEnd"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="选择日期时间">
                                </el-date-picker>
                            </el-form-item>
                        </div>

                        <!-- 自定义输入文本 -->
                        <div v-for="(item,idx) in currentOrder.inputJson" :key="idx">
                            <!-- text -->
                            <el-form-item :label="item.name" v-if="item.type == 'text'">
                                <el-input :placeholder="`请输入${item['name']}`" size="mini" clearable
                                v-model="item.value"
                                @input="(e)=>customInputHandle(e,item)"></el-input>
                            </el-form-item>

                            <!-- more -->
                            <el-form-item :label="item.name" v-if="item.type == 'more'">
                                <!-- {{ item }} -->
                                <el-select multiple placeholder="请选择" v-model="item.modelValue">
                                    <el-option
                                    v-for="(obj,k) in item.value.split(',')"
                                    :key="k"
                                    :label="obj"
                                    :value="obj">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            
                            <!-- one -->
                            <el-form-item :label="item.name" v-if="item.type == 'one'">
                                <!-- {{ item }} -->
                                <el-select placeholder="请选择" v-model="item.modelValue" value-key="name">
                                    <el-option
                                    v-for="(obj,k) in item.value.split(',')"
                                    :key="k"
                                    :label="obj"
                                    :value="obj">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <!-- colorCard -->
                            <el-form-item :label="item.name" v-if="item.type == 'colorCard'">
                                <el-upload
                                    action="http://47.103.2.155:8801/api/File/upload"
                                    list-type="picture-card"
                                    name="file"
                                    :on-success="(obj,file,list)=>colorCardPictureUploadSuccess(obj,file,list,item)"
                                    :limit="+item.max"
                                    :file-list="item.modelValue"
                                    :class="{ hide: item.modelValue['length'] >= 6 }"
                                    :on-remove="(file, fileList) => onRemoveImageColorCardList(file, fileList, item)"
                                  >
                                    <i class="el-icon-plus"></i>
                                  </el-upload>
                            </el-form-item>
                        </div>

                        <!-- 自定义图片 -->
                        <div v-for="(item,idx) in JSON.parse(currentOrder.imgJson)">
                            <!-- img -->
                            <el-form-item :label="item.name" v-if="item.type == 'img'">
                                <el-upload
                                    action="http://47.103.2.155:8801/api/File/upload"
                                    list-type="picture-card"
                                    name="file"
                                    :on-success="(obj,file,list)=>customPictureUploadSuccess(obj,file,list,idx)"
                                    :limit="+item.max"
                                    :file-list="currImageList"
                                    :class="{ hide: hideUploadBtn }"
                                    :on-remove="onRemoveImageList"
                                  >
                                    <i class="el-icon-plus"></i>
                                  </el-upload>
                            </el-form-item>
                        </div>

                    </el-form>
                </div>
            </div>
        </div>


        <!-- session05 -->
        <div style="margin-top: 12px;">
            <div style="display: flex;align-items: stretch;">
                <!-- left -->
                <div style="flex: 1;margin-right: 12px;background-color: white;padding: 12px;">
                    <!-- title -->
                    <div style="display: flex; position: relative">
                        <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
                        <div style="font-size: 18px;font-weight: bold;">添加备注与照片{{notePicList.length}}/6</div>
                        <div style="position: absolute;right: 0;">
                          <el-button type="primary" @click="onLoadTemplate">一键加载模板</el-button>
                        </div>
                    </div>
                    <!-- body -->
                    <div style="margin-top: 12px;">
                        <div style="display: flex;flex-wrap: wrap;">
                            <el-upload
                              action="http://47.103.2.155:8801/api/File/upload"
                              name="file"
                              list-type="picture-card"
                              multiple
                              :on-success="pictureUploadSuccess"
                              :limit="6"
                              :file-list="notePicList"
                              :on-remove="onRemoveNotePic"
                            >
                              <i class="el-icon-plus"></i>
                            </el-upload>
                        </div>
                        <el-input style="margin-top: 12px;" rows="4" type="textarea" v-model="currentOrder.notes" placeholder="请输入备注">
                        </el-input>
                    </div>
                </div>
                <!-- right -->
                <div style="flex: 1;background-color: white;padding: 12px;">
                    <!-- title -->
                    <div style="display: flex;align-items: center;">
                        <div style="display: flex;flex: 1;">
                            <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
                            <div style="font-size: 18px;font-weight: bold;">上传附件</div>
                        </div>
                        <div style="font-size: 16px;color: #666666;">添加附件</div>
                    </div>

                    <el-upload
                        class="upload-demo"
                        style="background-color: white;flex: 1;margin-top: 12px;"
                        action="http://47.103.2.155:8801/api/File/upload"
                        name="file"
                        :on-success="fileUploadSuccess"
                        multiple
                        :limit="3"
                        :file-list="attachment"
                        :on-remove="onRemoveAttachment"
                      >
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </div>
            </div>

        </div>
        <el-dialog
          title="模版列表"
          :visible.sync="templateVisible"
          width="60%"
          :destroy-on-close="true"
          @close="handleCloseTemplate">
          <templateList forCheck="true" @checkItem="checkTemplateItem"/>
        </el-dialog>
        <el-dialog
          title="评价"
          :visible.sync="commentVisible"
          width="60%"
          :destroy-on-close="true"
          @close="handleCloseComment">
          <addComment :orderInfo="currentOrder" @onCloseToggle="handleCloseComment"/>
        </el-dialog>
        <el-dialog
          title="价格变更"
          :visible.sync="changePriceVisible"
          width="30%"
          :destroy-on-close="true"
          @close="handleCloseChange">
          <changePrice :orderInfo="currentOrder" @onCloseToggle="handleCloseChange"/>
        </el-dialog>
        <el-dialog
          title="报价明细"
          :visible.sync="priceDetialVisible"
          width="60%"
          @close="handleClosePriceDetail"
          :destroy-on-close="true"
        >
          <orderPriceDetail :orderInfo="currentOrder" @onCloseToggle="handleClosePriceDetail"/>
        </el-dialog>
    </div>
  </template>
  
  <script>
  import { regionData } from 'element-china-area-data';
  import { getYzSettingList } from "@/api/sysDict";
  import { publishOrder } from '@/api/yzOrder';
  import templateList from '@/views/templates';
  import addComment from './addComment';
  import changePrice from './changePrice';
  import orderPriceDetail from './orderPriceDetail';
  import Api from "./api";

  export default {
    components: {
      templateList,
      addComment,
      changePrice,
      orderPriceDetail
    },
    data() {
      return {
        regionData,
        isAdd:false,
        addressCode:[],
        activeName: 'first',
        name: '我要下单',
        index:0,///当前选中项
        orders:[],
        timeTypes:['指定时段','截止时点','无限制'],
        attachment:[],//附件
        currentOrder:{
            imgJson:'',
            inputJson:'',
            timeLimitEnd:'',
            timeLimitStart:'',
            timeLimitType:'无限制',
            ///订单状态：待发布，发单中，服务中，已完成，已取消
            status:'待发布',
            // 接单人信息
            orderTakeName:"",
            orderTakePhone:"",
            orderTakeUserId:"",
            orderTakeTime:"",
            orderTakeRoleName:"",
            // 业主信息
            owerName:"",
            owerPhone:"",
            owerUserId:"",
            /// 下单人信息
            orderUserName:"",
            orderUserPhone:"",
            orderUserUserId :"",
        },
        // 指定时段图片
        currImageList: [],
        hideUploadBtn: false,
        templateVisible: false,
        templateList: [],
        // 备注与照片图片
        notePicList: [],
        commentVisible: false,
        changePriceVisible: false,
        priceDetialVisible: false,
      }
    },
    mounted(){
        let {isAdd,data,id} = this.$route.params;
        this.isAdd = isAdd;
        let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
        if(isAdd) { // 新增进入
            this.currentOrder = data;
            this.currentOrder.timeLimitType='无限制';
            this.currentOrder.status='待发布'
            this.currentOrder.orderUserName=userInfo.username
            this.currentOrder.orderUserPhone=userInfo.mobile
            this.currentOrder.orderUserId =userInfo.id
            this.orders.push(this.currentOrder);
        } else {
            this.fetchOrderDetail(id);
        }
        // 获取时间约定方式
        this.getTimeWay();
    },

    methods:{
        async fetchOrderDetail(id) {
            let self = this;
            let {data} = await Api.netYzOrderGet(id);
            let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
            if(data.status == 200) {
                self.currentOrder = data.data;
                self.currentOrder.orderUserName=userInfo.username
                self.currentOrder.orderUserPhone=userInfo.mobile
                self.currentOrder.orderUserId =userInfo.id
                let codes = `${self.currentOrder.projectLocal}`.match(/.{1,2}/g);
                let p = codes[0]
                let c = codes[1]
                let a = codes[2]
                self.addressCode = [p,p+c,p+c+a];
                self.orders.push(self.currentOrder);
                // 获取图片
                this.initialImgList(data.data.imgJson);
                // 附件
                this.attachment = this.handleImgList(data.data.attachment)
                // 处理输入框
                this.handleInputJson(self.currentOrder.inputJson)
            } else {
                this.$message({
                    message: '获取失败',
                    type: 'error',
                    showClose: true,
                    duration: 3000,
                });
                this.$store.dispatch("tagsView/delView", this.$route);
                this.$router.replace({name:"myorder"});

            }
        },

        initialImgList(data) {
          const imgObj = data && JSON.parse(data);
          const imgStr = imgObj[0].value;
          const imgList = typeof imgStr === 'string' ? imgStr.split(',') : [];
          const list = imgList.map((item, index) => {
            return { name: `图${index}`, url: item }
          })
          this.currImageList = list;
        },

        /// 自定义输入
        customInputHandle(value,item) {
          item['value'] = value;
        },

        /// 自定义商品上传成功
        customPictureUploadSuccess(obj,res,file,idx){
            if (obj.code == 200) {
                this.$message.success({dangerouslyUseHTMLString: true, message: obj.msg})
                this.handleImageList(file)
            } else {
                this.$message.error('操作失败')
            }
        },

        /// 常规商品上传成功
        pictureUploadSuccess(obj,res,file){
            if (obj.code == 200) {
                this.$message.success({dangerouslyUseHTMLString: true,message: obj.msg})
                this.handleNoteAndAttachment(file, 'notePicList', 'pictureArray')
            } else {
                this.$message.error('操作失败')
            }
        },

        /// 文件上传成功
        fileUploadSuccess(obj,res,file){
            if (obj.code == 200) {
                this.$message.success({dangerouslyUseHTMLString: true,message: obj.msg})
                this.handleNoteAndAttachment(file, 'attachment', 'attachment')
            } else {
                this.$message.error('操作失败')
            }
        },

        /// 新建订单
        createNewOrderHandle() {
            /// 关闭当前页面 然后切换到选择产品
            this.$store.dispatch("tagsView/delView", this.$route);
            this.$router.replace({name:"order01"});
        },

        /// 暂存
        async saveHandle() {
            this.currentOrder.projectLocal = this.addressCode[this.addressCode.length - 1];
            const inputJson = this.currentOrder.inputJson.map(item => {
              if (item.type === 'one') {
                item.value = item.modelValue || item.value;
                delete item.modelValue;
              } else if (item.type === 'more') {
                item.value = item.modelValue ? item.modelValue.join(',') : item.value;
                delete item.modelValue;
              } else if (item.type === 'colorCard') {
                const list = item.modelValue && item.modelValue.map(item => {
                  return item.url;
                })
                item.value = item.modelValue ? list.join(',') : '';
                delete item.modelValue;
              }
              return item;
            })
            const params = { ...this.currentOrder, inputJson: JSON.stringify(inputJson) }
            let res = undefined;
            if(this.isAdd) {
                res = await Api.netOrderSave(params);
            } else {
                res = await Api.netOrderUpdate(params);
            }
            let {status,msg} = res.data;
            if(status == 200) {
                this.$message({
                    message: "操作成功",
                    type: 'success',
                    showClose: true,
                    duration: 3000,
                });
            } else {
                this.$message({
                    message: msg,
                    type: 'error',
                    showClose: true,
                    duration: 3000,
                });
                
            }
        },
        /// 发布
        async publishHandle() {
            this.currentOrder.projectAddress = this.addressCode[this.addressCode.length - 1];
            this.currentOrder.status = "发单中";
            let res = undefined;
            res = await publishOrder(this.currentOrder);
            let {code,msg} = res.data;
            if(code == 200) {
                this.$message({
                    message: msg || "操作成功",
                    type: 'success',
                    showClose: true,
                    duration: 3000,
                });
            } else {
                this.$message({
                    message: msg,
                    type: 'error',
                    showClose: true,
                    duration: 3000,
                });
                
            }
        },
        // 获取时间约定方式
        async getTimeWay() {
          const { data } = await getYzSettingList();
          if (data.code === 200) {
            this.timeTypes = data.data[0]['timeLimitTypes'] || {};
          } else {
            this.$message({
              message: data.msg || '设置获取失败',
              type: 'error',
              showClose: true,
              duration: 3000,
            });
          }
        },
        // 一键加载模版
        onLoadTemplate() {
          this.templateVisible = true;
        },
        // 关闭模版弹窗
        handleCloseTemplate() {
          this.templateVisible = false
        },
        // 选中模板
        checkTemplateItem(item) {
          this.handleCloseTemplate();
          this.notePicList = this.handleImgList(item.pictureArray);
          this.currentOrder.pictureArray = item.pictureArray;
          this.currentOrder.notes = item.content;
        },
        handleImgList(imgStr) {
          const list = imgStr && typeof imgStr === 'string' ? imgStr.split(',') : [];
          const fileList = list.map((item) => {
            const fileName = item.split('/');
            return { name: `${fileName[fileName.length - 1]}`, url: item }
          })
          return fileList;
        },
        onRemoveImageList(file, fileList) {
          this.handleImageList(fileList);
        },
        handleImageList(fileList) {
          let arr = JSON.parse(this.currentOrder.imgJson);
          arr[0].value = '';
          this.currImageList = fileList.map((item, index) => {
            const url = (item['response'] && item['response']['data'] && item['response']['data']['fileUrl']) || item.url;
            arr[0].value += url + (index === fileList.length - 1 ? '' : ',')
            return { name: item.name, url }
          })
          this.hideUploadBtn = this.currImageList.length >= Number(arr[0].max);
          this.currentOrder.imgJson = JSON.stringify(arr);
        },
        // 色卡图片上传成功
        colorCardPictureUploadSuccess(obj,res,file,item){
          if (obj.code == 200) {
              this.$message.success({dangerouslyUseHTMLString: true, message: obj.msg})
              this.handleImageColorCardList(file, item)
          } else {
              this.$message.error('操作失败')
          }
        },
        onRemoveImageColorCardList(file, fileList, item) {
          this.handleImageColorCardList(fileList, item);
        },
        handleImageColorCardList(fileList, item) {
          item.modelValue = fileList.map((item, index) => {
            const url = (item['response'] && item['response']['data'] && item['response']['data']['fileUrl']) || item.url;
            return { name: item.name, url }
          })
        },
        onRemoveNotePic(file, fileList) {
          this.handleNoteAndAttachment(fileList, 'notePicList', 'pictureArray')
        },
        handleNoteAndAttachment(fileList, typeName, fieldName) {
          this.currentOrder[fieldName] = '';
          this[typeName] = fileList.map((item, index) => {
            const url = (item['response'] && item['response']['data'] && item['response']['data']['fileUrl']) || item.url;
            this.currentOrder[fieldName] += url + (index === fileList.length - 1 ? '' : ',')
            return { name: item.name, url }
          })
        },
        onRemoveAttachment(file, fileList) {
          this.handleNoteAndAttachment(fileList, 'attachment', 'attachment')
        },
        onOpenComment() {
          this.commentVisible = true;
        },
        handleCloseComment() {
          this.commentVisible = false;
        },
        handleCloseChange() {
          this.changePriceVisible = false;
        },
        onOpenChangePrice() {
          this.changePriceVisible = true;
        },
        onOpenPriceDetail() {
          this.priceDetialVisible = true;
        },
        handleClosePriceDetail() {
          this.priceDetialVisible = false;
        },
        // 获取选择的数组
        handleSelectJsonList(str, type) {
          if (type === 'one') {
            return str;
          } else if (type === 'more') {
            const list = typeof str === 'string' ? str.split(',') : [];
            return list;
          }
          return ''
        },
        handleInputJson(inputJson) {
          if (typeof inputJson === 'string') {
            const list = JSON.parse(inputJson);
            console.log('list', list)
            const currList = Array.isArray(list) && list.map((item, index) => {
              if (item.type === 'one') {
                const list = item.value && item.value.includes(',') ? item.value.split(',') : [];
                item.modelValue = list[0] || item.value;
              } else if (item.type === 'more') {
                const list = typeof item.value === 'string' ? item.value.split(',') : [];
                item.modelValue = list;
              } else if (item.type === 'colorCard') {
                item.modelValue = this.handleImgList(item.value);
              }
              return { ...item }
            })
            console.log('inputJson-list', currList)
            this.currentOrder.inputJson = currList;
          } else {
            this.currentOrder.inputJson = [];
          }
        },        
    }
  }
  </script>
  


  <style>
  .deleteBorder .el-tabs__nav-wrap::after{
      height: 0;
    }
  .hide .el-upload--picture-card {
      display: none !important;
  }
  .back_color {
    padding: 5px 20px;
    background: linear-gradient(to right,#06C5EA,#2456E0);
    border-radius: 20px;
    margin-right: 12px;
    cursor: pointer;
    box-shadow: 0 3px 3px #2456E080;
  }
  </style>